<template>
  <div class="login">
    <!-- 头部 -->
    <mt-header class="login_header" title="密码登录" fixed>
      <router-link slot="left" to="/home">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>

    <!-- 登录表单 -->
    <form class="login_form">
      <mt-field placeholder="账号"></mt-field>
      <mt-field placeholder="密码" :type="passwordType">
        <mt-switch v-model="isPassword"></mt-switch>
      </mt-field>
      <mt-field placeholder="验证码">
        <img :src="code" height="40px" width="85px" />
        <span style="font-size:12px" @click="getCode">看不清?换一张</span>
      </mt-field>
    </form>
    <div class="login_footer">
      <p>温馨提示：未注册过的账号，登录时将自动注册</p>
      <p>注册过的用户可凭账号密码登录</p>
      <mt-button type="primary" size="large" style="font-size:16px"
        >登录</mt-button
      >
      <p>重置密码?</p>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  components: {},
  data() {
    return {
      isPassword: true,
      code: "",
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    getCode() {
      this.$axios
        .post("/api/v1/captchas")
        .then((res) => {
          this.code = res.data.code;
        })
        .catch((error) => {
          Toast("获取验证码错误，请重试");
        });
    },
  },
  computed: {
    passwordType() {
      return this.isPassword ? "password" : "";
    },
  },
};
</script>

<style scoped lang="css">
.login_header {
  height: 2.856rem;
  font-size: 1.171rem;
}
.login_form {
  margin-top: 3.5rem;
  color: grey;
}
.login_form > * {
  border-bottom: 1px solid #eeeeee;
}
.login_footer {
  padding: 0px 10px;
  line-height: 2rem;
}
.login_footer p {
  color: red;
  font-size: 12px;
}
.login_footer p:last-child {
  color: #3b95e9;
  font-size: 14px;
  position: absolute;
  right: 0.625rem;
  margin-top: 10px;
}
</style>
